<template>
	<el-dialog :title="dialog.title" v-model="dialog.isShowDialog" width="500px">
		<el-form ref="formRef" :model="ruleForm" :rules="rules" label-width="auto">
			<el-row class="mb20">
				<el-col :span="24">
					<el-form-item label="用户昵称" prop="nickname">
						<el-input v-model="ruleForm.nickname" placeholder="请输入用户昵称" clearable />
					</el-form-item>
				</el-col>
			</el-row>
			<el-row class="mb20">
				<el-col :span="24">
					<el-form-item label="登录账号" prop="username">
						<el-input v-model="ruleForm.username" placeholder="请输入登录账号" clearable :disabled="dialog.type === 'add' ? false : true" />
					</el-form-item>
				</el-col>
			</el-row>
			<el-row class="mb20">
				<el-col :span="24">
					<el-form-item label="登录密码" :prop="dialog.type === 'edit' ? '' : 'password'">
						<el-input v-model="ruleForm.password" placeholder="请输入登录密码" clearable />
					</el-form-item>
				</el-col>
			</el-row>
			<el-row class="mb20">
				<el-col :span="24">
					<el-form-item label="关联角色" prop="role_id">
						<el-select
							v-model="ruleForm.role_id"
							clearable
							placeholder="请输入选择角色"
							filterable
							remote
							reserve-keyword
							:remote-method="roleIdRemoteMethod"
							remote-show-suffix
							:loading="roleSelect.loading"
							@focus="onRoleSelectFocus"
							class="w100"
						>
							<el-option v-for="item in roleSelect.options" :key="item.id" :label="item.role_name" :value="item.id" />
						</el-select>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row class="mb20">
				<el-col :span="24">
					<el-form-item label="状态" prop="status">
						<el-select v-model="ruleForm.status" class="w100">
							<el-option label="启用" :value="1" />
							<el-option label="禁用" :value="2" />
						</el-select>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<template #footer>
			<el-button @click="onCancel" size="small">取 消</el-button>
			<el-button type="primary" @click="onSubmit" :loading="dialog.submitLoading" size="small">提 交</el-button>
		</template>
	</el-dialog>
</template>

<script lang="ts">
import { nextTick, reactive, ref, toRefs } from 'vue';
import { ElMessage } from 'element-plus';
import { roleApi, usersApi } from '/@/api/admin/index';

const RoleApi = roleApi();
const UsersApi = usersApi();
export default {
	setup() {
		let callback: Function = () => {};
		const state = reactive({
			dialog: {
				isShowDialog: false,
				type: '',
				title: '',
				submitLoading: false,
			},
			ruleForm: {
				nickname: '',
				username: '',
				password: '',
				role_id: '',
				status: 1,
				id: '',
			},
			rules: {
				nickname: [{ required: true, message: '用户昵称不能为空', trigger: ['blur'] }],
				username: [{ required: true, message: '登录账号不能为空', trigger: ['blur'] }],
				password: [{ required: true, message: '登录密码不能为空', trigger: ['blur'] }],
				role_id: [{ required: true, message: '关联角色不能为空', trigger: ['blur', 'change'] }],
			},
			roleSelect: {
				loading: false,
				options: [] as any,
			},
		});
		const formRef = ref();

		/********** 点击事件 **********/
		// 角色获取焦点
		const onRoleSelectFocus = () => {
			!state.ruleForm.role_id && _roleList({ pageNum: 1, pageSize: 10 });
		};
		// 取消
		const onCancel = () => {
			state.dialog = {
				isShowDialog: false,
				type: '',
				title: '',
				submitLoading: false,
			};
		};
		// 提交
		const onSubmit = () => {
			(formRef.value as any)?.validate((valid: boolean) => {
				if (!valid) return;
				state.dialog.submitLoading = true;
				if (state.dialog.type === 'add') {
					_usersAdd(state.ruleForm);
				} else {
					_usersEdit({
						...state.ruleForm,
						admin_id: state.ruleForm.id,
					});
				}
			});
		};

		/********** 方法事件 **********/
		// 打开弹窗
		const openDialog = (data: any, params: any, fn: Function) => {
			state.dialog = {
				isShowDialog: true,
				type: data.type,
				title: data.title,
				submitLoading: false,
			};
			callback = fn;
			nextTick(() => {
				(formRef.value as any)?.resetFields();
				if (data.type === 'edit') {
					state.ruleForm = { ...params, password: '' };
					state.roleSelect.options = [{ id: params.role_id, role_name: params.role_name }];
				}
			});
		};
		// 角色查询
		const roleIdRemoteMethod = (query: string) => {
			if (query) {
				state.roleSelect.loading = true;
				_roleList({ pageNum: 1, pageSize: 10, role_name: query });
			}
		};

		/********** 网络事件 **********/
		// 角色列表
		const _roleList = (params: object) => {
			RoleApi.roleList(params)
				.then((res: any) => {
					state.roleSelect.options = res.data.list;
					state.roleSelect.loading = false;
				})
				.catch(() => (state.roleSelect.loading = false));
		};
		// 添加用户
		const _usersAdd = (params: object) => {
			UsersApi.usersAdd(params)
				.then(() => {
					ElMessage.success('操作成功！');
					onCancel();
					callback();
				})
				.catch(() => (state.dialog.submitLoading = false));
		};
		// 编辑角色
		const _usersEdit = (params: object) => {
			UsersApi.usersEdit(params)
				.then(() => {
					ElMessage.success('操作成功！');
					onCancel();
					callback();
				})
				.catch(() => (state.dialog.submitLoading = false));
		};

		return {
			formRef,
			onCancel,
			onSubmit,
			openDialog,
			onRoleSelectFocus,
			roleIdRemoteMethod,
			...toRefs(state),
		};
	},
};
</script>

<style scoped lang="scss">
.menu-data-tree {
	width: 100%;
	border: 1px solid #dcdfe6;
	border-radius: 5px;
	padding: 5px;
}
</style>
